import React from 'react'

import { Carousel, Flex, Grid } from 'antd-mobile';
import axios from 'axios'

import Nav1 from '../../assets/images/nav-1.png'
import Nav2 from '../../assets/images/nav-2.png'
import Nav3 from '../../assets/images/nav-3.png'
import Nav4 from '../../assets/images/nav-4.png'

import './index.scss'

// 导入utils中的获取当前城市的方法
import { getCurrentCity } from '../../utils/index'
import { BASE_URL } from '../../utils/url'

import SearchHeader from '../../components/SearchHeader'

// const BASE_URL = `http://103.153.138.54:8080`

navigator.geolocation.getCurrentPosition(position => {
  console.log('当前位置：', position)
})

export default class Index extends React.Component {
  state = {
    // 图片的名称数组
    swipers: [1, 3, 5],
    isSwiperLoaded: false,
    navArray: [
      {
        img: Nav1,
        title: '整租'
      }, {
        img: Nav2,
        title: '合租'
      }, {
        img: Nav3,
        title: '地图找房'
      }, {
        img: Nav4,
        title: '发布房源',
        action: '/rent/addRent'
      }
    ],
    // 租房小组数据
    groups: [],
    // 咨询数据
    news: [],
    // 当前城市名称
    curCityName: '上海'
  }

  //获取轮播图数据
  async getSwipers() {
    const res = await axios.get('http://103.153.138.54:8080/home/swiper')
    this.setState(() => {
      return {
        swipers: res.data.body,
        isSwiperLoaded: true
      }
    })
  }

  //获取租房小组数据
  async getGroups() {
    const res = await axios.get('http://103.153.138.54:8080/home/groups', {
      params: {
        area: "AREA%7C88cff55c-aaa4-e2e0"
      }
    })
    // console.log(res)
    this.setState({
      groups: res.data.body
    })
  }

  // 获取最新资讯数据
  async getNews() {
    const res = await axios.get('http://103.153.138.54:8080/home/news', {
      params: {
        area: "AREA%7C88cff55c-aaa4-e2e0"
      }
    })
    console.log('news:', res.data)
    this.setState({
      news: res.data.body
    })
  }
  async componentDidMount() {
    this.getSwipers()
    this.getGroups()
    this.getNews()

    // 获取当前的城市信息显示在首页
    const curCity = await getCurrentCity()
    // console.log(curCity)
    this.setState({
      curCityName: curCity.label
    })
  }

  // 渲染轮播图
  renderSwiper() {
    return this.state.swipers.map(val => (
      <a
        key={val.id}
        href={val.imgSrc}
        style={{ display: 'inline-block', width: '100%', height: 212 }}
      >
        <img
          src={BASE_URL + val.imgSrc}
          alt=""
          style={{ width: '100%', verticalAlign: 'top' }}
        />
      </a>
    ))
  }

  // 渲染导航
  renderNavs() {
    const { history } = this.props;

    return <Flex className='nav'>
      {this.state.navArray.map(item => (
        <Flex.Item key={item.id} onClick={item.action ? () => history.push('./rent/addRent') : null}>
          <img src={item.img} alt="" path='/home/my' />
          <h2>{item.title}</h2>
        </Flex.Item>
      ))}
    </Flex>
  }

  //渲染最新资讯
  renderNews() {
    return this.state.news.map(item => (
      <div className="news-item" key={item.id}>
        <div className="imgLeft">
          <img src={BASE_URL + item.imgSrc} alt="" />
        </div>
        <Flex className="content" direction="column" justify="between">
          <div className="title">{item.title}</div>
          <Flex className="info" justify="between">
            <span>{item.from}</span>
            <span>{item.date}</span>
          </Flex>
        </Flex>
      </div>
    ))
  }
  render() {
    return (
      <div className="index">
        {/* 轮播图 */}
        <div className='swiper'>
          {
            this.state.isSwiperLoaded ?
              (<Carousel
                autoplay={true}
                infinite={true}
                autoplayInterval={2000}
              >
                {this.renderSwiper()}
              </Carousel>) : ('')
          }

          {/* 搜索功能 */}
          <SearchHeader cityName={this.state.curCityName} />
        </div>

        {/* 导航栏 */}
        {this.renderNavs()}

        {/* 租房小组 */}
        <div className="group">
          <div className="title">
            租房小组<span className="more">更多</span>
          </div>

          {/* 宫格组件 */}
          <Grid data={this.state.groups} activeStyle={false} columnNum={2} square={false} hasLine={false} renderItem={(item) => (
            <Flex className="group-item" justify="around" key={item.id}>
              <div className="words">
                <p className="title">{item.title}</p>
                <span className="info">{item.desc}</span>
              </div>
              <img src={BASE_URL + item.imgSrc} alt="" />
            </Flex>)
          }></Grid>
        </div>

        {/* 最新资讯 */}
        <div className="news">
          <div className="news-title">最新资讯</div>
          {this.renderNews()}
        </div>
      </div>
    );
  }
}